<style>
    .box{
        width: 200px;
        height: 200px;
        padding: 50px;
        margin:  100px auto;
        perspective: 800;
        -webkit-perspective: 800;
        border: 1px solid #000000;
    }
    .div {
        width: 200px;
        height: 200px;
        transition: 5s;
        position: relative;
        transform-style: preserve-3d;
        transform-origin: center center 100px;
     }
     .box:hover .div{
         transform: rotateY(360deg)
     }

    .div div{
        position: absolute;
        width: 200px;
        opacity: 0.4;

        font: 100px/200px '宋体';
        text-align: center;
        color: #fff;
        height: 200px;
    }
    
    .div div:nth-of-type(1){
        background: red;
        left: 0;
        top: -200px;
        transform-origin: bottom ;
        transform: rotateX(-90deg)
    }
    .div div:nth-of-type(2){
        background: blue;
        left:-200px;
        transform-origin: right ;
        transform: rotateY(90deg);
        top: 0;
    }
    .div div:nth-of-type(3){
        background: pink;
        left: 0;
        top: 0;
    }
    .div div:nth-of-type(4){
        background: green;
        left: 200px;
        transform-origin: left ;
        transform: rotateY(-90deg);
        top: 0;
    }
    .div div:nth-of-type(5){
        background: yellow;
        left: 0;
        transform-origin: top ;
        transform: rotateX(90deg);
        top: 200px;
    }
    .div div:nth-of-type(6){
        background: yellowgreen;
        left: 0;
        transform:translateZ(200px);
        top: 0;
    }

</style>
<body>
<div class="box">
    <div class="div">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
    </div>
</div>
</body>

